<template>
    <div>
        <el-steps :active="active" simple>
            <el-step title="步骤 1" icon="el-icon-edit"></el-step>
            <el-step title="步骤 2" icon="el-icon-upload"></el-step>
            <el-step title="步骤 3" icon="el-icon-picture"></el-step>
        </el-steps>
        <el-form :model="ruleForm1" v-show="active==0" status-icon :rules="rules1" ref="ruleForm1" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm1.password" autocomplete="off"></el-input>
            </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="ruleForm1.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="submitForm1('ruleForm1')">提交</el-button>
                    <el-button @click="resetForm('ruleForm1')">重置</el-button>


        </el-form>
        <el-form :model="ruleForm2" v-show="active==1" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm2.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkpassword">
                <el-input type="password" v-model="ruleForm2.checkpassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
            </el-form-item>
        </el-form>
        <div v-show="active==2">
            <span>密码修改完成五秒后退出</span>
            <el-divider></el-divider>

        </div>

    </div>

</template>

<script>
    export default {
        props: ["userId"],
        name: "ChangePsw",
        data() {
            var validatepassword= (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };

            var validatepassword1= (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm1.checkpassword !== '') {
                        this.$refs.ruleForm.validateField('checkpassword1');
                    }
                    callback();
                }
            };
            var validatepassword1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm2.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm1: {
                    userId: '',
                    password: '',
                    email: '',
                }, ruleForm2: {
                    userId: '',
                    password: '',
                    checkpassword: '',
                },
                active: 0,
                rules1: {
                    password: [
                        {validator: validatepassword, trigger: 'blur'}
                    ],
                    email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}],
                },
                rules: {
                    password: [
                        {validator: validatepassword1, trigger: 'blur'}
                    ],
                    checkpassword: [
                        {validator: validatepassword1, trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
            submitForm1(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm1.userId=this.userId
                        var that = this;
                        this.$http.post(`system/user/exituser`,this.ruleForm1).then(function (response) {
                            if (response.data.success) {
                                that.$message.success(response.data.message);
                                that.active++;
                            } else {
                                that.$message.error(response.data.message);
                            }
                        });
                    } else {
                        this.$message.error('error submit!!');
                        return false;
                    }
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm2.userId=this.userId
                        var that=this
                        this.$http.post("system/user/changepassword",this.ruleForm2).then(function (response) {
                            if (response.data.success) {
                                that.$message.success(response.data.message);
                                that.active++;
                            } else {
                                that.$message.error(response.data.message);
                            }
                        })
                        setTimeout( ()=>{ //延时加载初始化函数
                            this.exit();
                        },2000)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            exit() {
                location.reload();
                sessionStorage.clear()
            }
        }

    }
</script>

<style scoped>

</style>